<template>
  <div class="buy">
    <van-nav-bar
      title="购买订单"
      left-text=""
      left-arrow
      :z-index=99
      @click-left="routeToPath('')"
    />
    <div class="step text-center">
      <div class="step-name">
        请输入门票数量：
      </div>
      <div class="step-value">
        <van-stepper v-model="buyNum" />
      </div>
    </div>

    <div class="select">
      <h5>请选择产品</h5>
      <ul>
        <li v-for="(i, index) in selectList"
         @click="clickSelect(index)" :class="selectActive == index?'active':''">
          {{ i.name }}
        </li>
      </ul>
    </div>

    <div class="main" v-html="main">

    </div>

    <div class="submit" @click="clickSubmit">
      确认订单
    </div>
  </div>
</template>

<script>
import { Stepper } from 'vant';
import { NavBar } from 'vant';
export default {
  components: {
    [Stepper.name]: Stepper,
    [NavBar.name]:NavBar,
  },
  data(){
    return {
      buyNum: 1,
      selectActive: 0,
      selectList: [{
        name: '环球影城（成人票）',
      },{
        name: '环球影城（儿童票）',
      },{
        name: '环球影城（老人票）'
      },{
        name: '水上探险乐园（成人票）'
      },{
        name: '水上探险乐园（儿童票）'
      },{
        name: '水上探险乐园（老人票）'
      }],
      main: '这是内容区，富文本编辑的'
    }
  },
  methods: {
    clickSelect(index) {
      this.selectActive = index;
    },
    clickSubmit() {
      this.$router.push('/orders/sure')
    }
  }
}
</script>

<style lang="scss" scoped>
.buy{
  padding: 0 .4rem;
}
.step{
  padding: .6rem 0;
  border-bottom: 1px solid #eee;
  .step-name{
    display: inline-block;
    line-height: .8rem;
    vertical-align: bottom;
  }
  .step-value{
    display: inline-block;
  }
}
.select{

  overflow: hidden;
  li{
    width: 30%;
    float: left;
    background-color: #F56C6C;
    margin-left: .5%;
    margin-right: .5%;
    margin-bottom: 1%;
    border-radius: .1rem;
    color: #fff;
    padding: .2rem 1%;
    text-align: center;
  }
  .active{
    background-color: #E6A23C
  }
}
.main{
  margin-top: .4rem;
  padding-bottom: 1.6rem;
}

</style>
